<template>
  <el-dialog
    width="800px"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :title="title"
    @close="onClose"
  >
    <div class="app-container">
      <table class="tb-table">
        <tr>
          <td class="tb-title" width="20%">
            模板名称:
          </td>
          <td colspan="3">
            {{ this.form.name }}
          </td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">
            创建时间:
          </td>
          <td width="30%">
            {{ this.form.createTime }}
          </td>
          <td class="tb-title" width="20%">
            创建人:
          </td>
          <td width="30%">
            {{ this.form.creatorName }}
          </td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">
            附件信息:
          </td>
          <td colspan="3">
            <table class="tb-table">
              <tr>
                <td class="tb-title txt-center" width="40%">文件名</td>
                <td class="tb-title txt-center" width="20%">大小</td>
                <td class="tb-title txt-center" width="20%">上传人</td>
                <td class="tb-title txt-center" width="20%">操作</td>
              </tr>
              <tr v-for="(item,index) in form.files" :key="index">
                <td class="txt-center">{{ item.name }}</td>
                <td class="txt-center">{{ parseInt(item.size / 1000) }} kb</td>
                <td class="txt-center">{{ form.creatorName }}</td>
                <td class="txt-center">
                  <el-button type="text" @click="view(item.id)">查看</el-button>
                  <el-button type="text" @click="download(item.id,item.name)">下载</el-button>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
    </div>
    <FileViewer ref="viewer"></FileViewer>
  </el-dialog>
</template>

<script>
import { getOne } from '@/api/sysData'
import FileViewer from '@/components/FileViewer'
import { downloadFile } from '@/utils/download'

export default {
  components: {
    FileViewer
  },
  data() {
    return {
      dialogVisible: false,
      title: '查看',
      fileList: [],
      form: {
        id: '',
        name: '',
        createTime: '',
        creatorName: '',
        files: []
      },
      limit: 1,
      rules: {}
    }
  },
  mounted() {
  },
  methods: {
    onShow(id) {
      this.form.id = id
      this.init()
      this.dialogVisible = true
    },
    init() {
      getOne(this.form.id).then(res => {
        if (res.code === 20000) {
          this.form = res.data
        }
      })
    },
    download(id, name) {
      downloadFile(id, name)
    },
    view(id) {
      this.$refs['viewer'].onShow(id)
    },
    onClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.el-form {
  padding: 20px 20px;
}

.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}

.txt-center {
  text-align: center;
  padding: 0 0 !important;
}
</style>
